(function($){
    var AutoRowsNumbers = function (element, config){
        this.$element = $(element);

        this.$Width = (this.$element.outerWidth(true) - 2);
        this.$Height = this.$element.outerHeight(true);

        this.$group   = $('<div/>', { 'class' : "textarea-group" });
        this.$rows      = $('<div/>', { 'class' : 'textarea-rows' });
        this.$wrap    = $('<div/>', { 'class' : 'textarea-wrap' });

        this.$group.css({
            "width" : "100%",
            "height" : this.$Height + 'px',
            "display" : config.display,
            "background-color" : config.bgColor,
            "border" : "1px solid #e2e2e2",
            "border-radius" : "2px"
        });

        this.$wrap.css({
            /*"padding" : ((this.$element.outerHeight() - this.$element.height())/2) + 'px 0',*/
            "position" : "absolute",
            "width" : config.width,
            "height" : this.$Height + 'px',
            "border-right" : "1px solid #e2e2e2"
        });

        this.$rows.css({
            "color" : config.color,
            "width" : config.width,
            "height" : this.$Height,
            /*"font-size" : this.$element.css("font-size"),*/
            "line-height" : this.$element.css("line-height"),
            "position" : "absolute",
            "overflow" : "hidden",
            "text-align" : "center"
        });

        this.$element.css({
            "padding-left": "2px",
            "border": "0px",
            "white-space" : "pre",
            "resize": "none",
            "margin-left" : parseInt(config.width) + 'px',
            "width": (this.$Width - parseInt(config.width) - 2) + 'px',
            "height": this.$Height + 'px',
        });
    }

    AutoRowsNumbers.prototype = {
        constructor: AutoRowsNumbers,

        init : function(){
            var that = this;
            that.$element.wrap(that.$group);
            that.$rows.insertBefore(that.$element);
            this.$rows.wrap(that.$wrap)
            that.$element.on('keydown',{ that: that }, that.inputText);
            that.$element.on('scroll',{ that: that },that.syncScroll);
            that.inputText({data:{that:that}});
        },

        inputText: function(event){
            var that = event.data.that;

            setTimeout(function(){
                var value = that.$element.val();
                value.match(/\n/g) ? that.updateLine(value.match(/\n/g).length+1) : that.updateLine(1);
                that.syncScroll({data:{that:that}});
            },0);
        },

        updateLine: function(count){
            var that = this;
            that.$element;
            that.$rows.html('');

            for(var i=1;i<=count;i++){
                that.$rows.append("<div>"+i+"</div>");
            }
        },

        syncScroll: function(event){
            var that = event.data.that;
            that.$rows.children().eq(0).css("margin-top",  -(that.$element.scrollTop()) + "px");
        }
    }

    $.fn.setTextareaCount = function(option){
        var config = {},
            option = arguments[0] ? arguments[0] : {};

        config.color   = option.color ? option.color : "#FFF";
        config.width   = option.width ? option.width : "30px";
        config.bgColor = option.bgColor ? option.bgColor : "#F2F2F2";
        config.display = option.display ? option.display : "block";

        return this.each(function () {
            var $this = $(this),
                data  = $this.data('autoRowsNumbers');

            if (!data){
                $this.data('autoRowsNumbers', (data = new AutoRowsNumbers($this, config)));
            }

            if (typeof option === 'string'){
                return false;
            } else {
                data.init();
                $(window).resize(function(){
                    $(".textarea-group textarea").width($(".textarea-group").width() - $(".textarea-wrap").width()  - 2);
                });

            }
        });
    }
})(jQuery)